import { AxisInterface } from './chartInterface'

export function roundRect (ctx, x, y, width, height, radius) {
  ctx.beginPath()
  if (width > 0) {
    ctx.moveTo(x + radius, y)
  } else {
    ctx.moveTo(x - radius, y)
  }

  ctx.arcTo(x + width, y, x + width, y + height, radius)
  ctx.arcTo(x + width, y + height, x, y + height, radius)
  ctx.arcTo(x, y + height, x, y, radius)

  if (width > 0) {
    ctx.arcTo(x, y, x + radius, y, radius)
  } else {
    ctx.arcTo(x, y, x - radius, y, radius)
  }
}

export function calculateNum (arr, isMin?) {
  if (!arr || !arr.length) {
    return { num: 0, step: 0, min: 0, max: 0 }
  }
  let high = Math.max.apply(this, arr)
  let low = Math.min.apply(this, arr)
  let num = 0
  let max = 0
  let min = 0
  let pow; let sum; let step; let absLow; let i; let j; let k = 0
  outer:
  for (i = 0; i < 10; i++) {
    pow = Math.pow(10, i)
    for (j = 1; j <= 10; j++) {
      sum = pow * j
      if (sum > high) {
        max = sum
        break
      }
    }
    if (!max) continue
    if (i < 2 || j > 4) break
    for (k = 0; k < 10; k++) {
      if (max - pow / 10 * (k + 1) <= high) {
        max -= pow / 10 * k
        break outer
      }
    }
  }
  num = j
  if (num < 4) {
    if (max % 4 == 0) { num = 4 }
    if (max % 3 == 0) { num = 3 }
  }

  step = Math.round(max / num * 100) / 100

  if (low < 0) {
    absLow = Math.abs(low)
    num++
    min += step
    while (min < absLow) {
      num++
      min += step
    }
    min = -min
  }

  if (isMin) {
    let l = num
    let m = 0
    for (let i = 1; i < l; i++) {
      let n = min + i * step
      if (low < n) {
        break
      }
      m = n
      num--
    }
    min = m
  }
  return {
    num: num,
    step: step,
    min: min,
    max: max
  }
}

const seriesOpt = {
  name: '',
  lineStyle: {
    color: '',
    width: 2,
    type: 'solid'
  },
  label: {
    show: false,
    color: '#333',
    fontWeight: 'normal',
    fontFamily: 'sans-serif',
    fontSize: 18
  },
  itemStyle: {
    symbol: 'solidCircle',
    symbolSize: 2,
    symbolColor: '',
    borderWidth: 0,
    borderType: 'solid',
    borderColor: ''
  },
  data: []
}

const axisOpt: AxisInterface = {
  axisLine: { // 坐标轴轴线相关设置。
    show: true,
    lineStyle: {
      color: '#333',
      width: 1,
      type: 'solid'
    }
  },
  axisTick: {
    show: true,
    interval: 4, // 与文本的间隔
    length: 5, // 刻度的长度
    lineStyle: {
      color: '#333',
      width: 1
    }
  },
  axisLabel: {
    color: '#333',
    fontWeight: 'normal',
    fontFamily: 'sans-serif',
    fontSize: 18,
  },
}

const xAxisOpt: AxisInterface = {
  ...axisOpt,
  data: []
}
const yAxisOpt: AxisInterface = {
  nameTextStyle: {
    color: '#333',
    fontWeight: 'normal',
    fontFamily: 'sans-serif',
    fontSize: 18,
  },
  ...axisOpt,
  splitLine: { // 坐标轴中的分隔线。
    show: true,
    lineStyle: {
      color: '#ccc',
      width: 1
    }
  },
  data: []
}
const axisPointer = {
  type: 'line',
  lineStyle: {
    color: '#555',
    width: 1,
    type: 'solid'
  },
  shadowStyle: {
    color: 'rgba(150,150,150,0.3)'
  }
}
const tooltip = {
  show: true,
  axisPointer: axisPointer,
  backgroundColor: 'rgba(50,50,50,0.7)',
  borderColor: '#333',
  borderWidth: 0,
  padding: 10,
  textStyle: {
    color: '#fff',
    fontWeight: 'normal',
    fontFamily: 'sans-serif',
    fontSize: 18,
  }
}

/**
 * 图表基类
 */
export class Chart {
  ctx: any;
  W: number;
  H: number;
  cPaddingT: number = 20;
  cPaddingB: number = 20;
  cPaddingL: number = 20;
  cPaddingR: number = 20;
  color: Array<string> = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
  legend: Array<any> = [];
  tooltip: any = tooltip;
  series: Array<any> = [];
  xAxis: AxisInterface = {};
  yAxis: AxisInterface = yAxisOpt;
  animateArr: Array<any> = [];
  info: any = {};
  drawing: boolean = false;
  constructor () {}

  init (ctx, opt) {
    this.ctx = ctx
    this.W = ctx.width
    this.H = ctx.height
    this.ctx.imageSmoothingQuality = 'high'
    this.setOption(opt)
    this.create()
  }
  setOption (opt) {
    for (const key in opt) {
      const item = opt[key]
      switch (key) {
        case'cPaddingT':
          this.cPaddingT = Number(key)
          break
        case'cPaddingB':
          this.cPaddingB = Number(key)
          break
        case'cPaddingL':
          this.cPaddingL = Number(key)
          break
        case'tooltip':
          // if (Array.isArray(item)) {
          //   this.xAxis = item.map(li => {
          //       return Object.assign({}, xAxisOpt, li)
          //   })
          // } else {
          //
          // }
          this.tooltip = Object.assign({}, tooltip, item)
          break
        case'xAxis':
          // if (Array.isArray(item)) {
          //   this.xAxis = item.map(li => {
          //       return Object.assign({}, xAxisOpt, li)
          //   })
          // } else {
          //
          // }
          this.xAxis = Object.assign({}, xAxisOpt, item)
          break
        case'yAxis':
          // if (Array.isArray(item)) {
          //   this.yAxis = item.map(li => {
          //       return Object.assign({}, yAxisOpt, li)
          //   })
          // } else {
          //
          // }
          this.yAxis = Object.assign({}, yAxisOpt, item)
          break
        case 'series':
          this.series = item.map(li => {
            return Object.assign({}, seriesOpt, li)
          })
          // console.log('this.series', JSON.stringify(this.series))
          break
        default:
          this[key] = item
      }
    }
  }
  create () {

  }
  setCtxStyle (style) {
    for (const key in style) {
      this.ctx[key] = style[key];
    }
  }
  showInfo (pos, title, arr) {
    // let box = this.canvas.getBoundingClientRect()
    // let con = this.container.getBoundingClientRect()
    // let html = ''
    // let txt = ''
    // html += '<p>' + title + '</p>'
    // arr.forEach(obj => {
    //   txt = this.yAxis.formatter ? this.yAxis.formatter.replace('{value}', obj.num) : obj.num
    //   html += '<p>' + obj.name + ': ' + txt + '</p>'
    // })
    // this.tip.innerHTML = html
    // this.tip.style.left = (pos.x + (box.left - con.left) + 15) + 'px'
    // this.tip.style.top = (pos.y + (box.top - con.top) + 15) + 'px'
    // this.tip.style.display = 'block'
  }
}